<template>
  <el-col :span="18" class="homeLeft" ref="homeLeft">
    <div class="bottom" :style="cStyleHeight">
      <doneArea></doneArea>
    </div>
    <div class="bottom" :style="cStyleHeight">
      <flowArea></flowArea>
    </div>
    <leftArea class="lastArea" :height="height" />
  </el-col>
</template>

<script>
import leftArea from "../common/leftArea";
import doneArea from "@/views/com/doneArea";
import flowArea from "@/views/com/flowArea";
export default {
  components: {
    leftArea,
    doneArea,
    flowArea
  },
  data () {
    return {
      height: 260
    };
  },
  computed: {
    cStyleHeight () {
      return {
        height: this.height + "px"
      };
    }
  },
  mounted () {
    this.height = Math.floor(this.$refs.homeLeft.$el.offsetHeight / 3) - 10;
    // console.log(this.height);
  }
};
</script>

<style lang="less" scoped>
.homeLeft {
  height: 100%;
  padding-left: 0 !important;
  padding-top: 10px;
  .bottom {
    margin-bottom: 5px;
  }
  .lastArea {
    width: 100%;
    background-color: #ffffff;
    padding: 0 8px;
  }
}
</style>